import React, { Component } from "react";
import PubSub from "pubsub-js";
import axios from "axios";

export default class Search extends Component {
  //点击搜索用户
  search = () => {
    // // 连续解构赋值用法
    const { value } = this.keyWordElement;
    if (value.trim() !== "") {   //消息出版
      PubSub.publish("张三", { isFirst: false, isLoading: true });
      // 发送请求
      axios.get(`/api/search/users?q=${value}`).then((res) => {
        PubSub.publish("张三", { isLoading: false, users: res.data.items });
      });
    }
  };

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          <input
            ref={(c) => (this.keyWordElement = c)}
            type="text"
            placeholder="输入关键字搜索用户"
          />
          &nbsp;<button onClick={this.search}>搜索</button>
        </div>
      </section>
    );
  }
}
